<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>电气设备安装流程管理系统 － 管理者</title>
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Morris Chart Styles-->

<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- TABLE STYLES-->
<link href="assets/js/dataTables/dataTables.bootstrap.css"
	rel="stylesheet" />
<link href="assets/css/admin.css"
	rel="stylesheet" />
	<style type="text/css">
		#l-map{height:300px;width:100%;}
	</style>
</head>
<body class="equipment_manager">
	<div id="wrapper">
		<nav class="navbar navbar-default top-navbar" role="navigation">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".sidebar-collapse">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="index.html"><strong>电气管理系统</strong></a>
			</div>

			<ul class="nav navbar-top-links navbar-right">
				<!-- /.dropdown -->
				<li class="dropdown"><a class="dropdown-toggle"
					data-toggle="dropdown" href="#" aria-expanded="false"> <i
						class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
				</a>
					<ul class="dropdown-menu dropdown-user">
						<li><a href="user_logout.html"><i class="fa fa-sign-out fa-fw"></i>
								Logout</a></li>
					</ul> <!-- /.dropdown-user --></li>
				<!-- /.dropdown -->
			</ul>
		</nav>
		<!--/. NAV TOP  -->
		<nav class="navbar-default navbar-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="main-menu">

					<li><a href="user_operatorList.html"><i
							class="fa fa-dashboard"></i> 安装人员管理</a></li>
					<li><a href="equipment_list.html" class="active-menu"><i class="fa fa-desktop"></i>
							设备管理</a></li>
					<li><a href="user_center.html"><i class="fa fa-bar-chart-o"></i>
							个人中心</a></li>

					<li><a href="workflow_list.html"><i class="fa fa-table"></i>安装信息管理</a></li>

				</ul>

			</div>

		</nav>
		<!-- /. NAV SIDE  -->
		<div id="page-wrapper">
			<div class="header">
				<h3 class="page-header">
					<small>当前位置：设备管理</small>
				</h3>
			</div>
			<div id="page-inner">
				<div class="row" id="list" style="display: block;">
					<div class="col-md-12">
						<!-- Advanced Tables -->
						<div class="panel panel-default">
							<div class="panel-body">
								<div class="table-responsive">
									<a id="addEquipment" 
										class="btn btn-primary btn-sm">添加设备</a>

									<table class="table table-striped table-bordered table-hover"
										id="dataTables-example">
										<thead>
											<tr>
												<th>序号</th>
												<th class="hidden">id</th>
												<th>设备名称</th>
												<th>设备类型</th>
												<th>设备图片</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${equipments}" var="equipment" varStatus="sta">
												<tr class="item" data-id="${equipment.id}">
													<th class="editable">${sta.index+1}</th>
													<th class="editable hidden" name="equipment.id">${equipment.id}</th>
													<th class="editable" name="equipment.name">${equipment.name}</th>
													<th class="editable" name="equipment.type">${equipment.type}</th>
													<th class="editable" name="equipment.img" data-img="imgs/${equipment.img}"><img width="100" height="100" src="imgs/${equipment.img}"/></th>
													<td class="center"><a
														class="btn btn-link btn-sm delete">删除</a>|<a href="#"
														class="btn btn-link btn-sm editDetail">修改</a></td>
												</tr>
											</c:forEach>
										</tbody>
									</table>

								</div>
							</div>
						</div>
						<!--End Advanced Tables -->
					</div>
				</div>
				<div class="row" id="equipment" style="display: none;">
					<div class="col-lg-12">

						<div class="panel panel-default">
							<div class="panel-body">
								<div class="row">
									<div class="col-lg-6">
										<p>设备信息：</p>
									</div>
									<div class="col-lg-12">
										<a class="close" data-dismiss="modal">×</a>
									</div>
								</div>
								<hr>
								<div class="row">
									<div class="col-lg-12">
										<form class="form-horizontal" action="equipment_add.html" method="post" enctype="multipart/form-data">
											<input type="hidden" name="equipment.status" class="form-control">
											<div class="form-group">
												<label  class="col-sm-3 control-label">设备名称</label>
												<div class="col-sm-8">
													<input type="text" name="equipment.name" class="form-control"
														 placeholder="设备名称" required >
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-3 control-label">设备类型</label>
												<div class="col-sm-8">
													<select name="equipment.type" placeholder="设备类型" class="form-control" required>
														<option value="传动类设备">传动类设备</option>
														<option value="控制系统设备">控制系统设备</option>
														<option value="电气仪表设备">电气仪表设备</option>
														<option value="供配电设备">供配电设备</option>
													</select>
												</div>
											</div>
											<div class="form-group">
												<label for="inputEmail3" class="col-sm-3 control-label">图片</label>
												
												<div class="col-sm-8">
													<input type="file" name="img" accept="image/*" class="form-control"
														 required>
												</div>
												<img src="" class="col-xs-offset-3 img" width="100" height="100"/>
											</div>
											<div class="row">&nbsp;</div>
											
											<div class="row">
												<div class="col-lg-1 col-lg-offset-2">
													<button class="btn btn-warning submit">确定</button>
												</div>
												<div class="col-lg-1">
													<a class="btn btn-default close" data-dismiss="modal">取消</a>
												</div>
											</div>
										</form>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
				
			</div>
			<!-- /. PAGE INNER  -->
		</div>
		<!-- 确认删除 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">确定移除该设备吗？</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-warning confirm" >确定
						</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			</div>
			</div>
			<!-- /.modal -->
			<!-- /. PAGE WRAPPER  -->
			<!-- /. WRAPPER  -->
			<!-- JS Scripts-->
			<!-- jQuery Js -->
			<script src="assets/js/jquery-1.10.2.js"></script>
			<!-- Bootstrap Js -->
			<script src="assets/js/bootstrap.min.js"></script>
			<!-- Metis Menu Js -->
			<script src="assets/js/jquery.metisMenu.js"></script>
			<!-- DATA TABLE SCRIPTS -->
			<script src="assets/js/dataTables/jquery.dataTables.js"></script>
			<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
			<script>
				$(document).ready(function() {
					$('#dataTables-example').dataTable();
				});
			</script>
			<script src="assets/js/admin_user.js"></script>
			 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=btLGkjnTx0nz7DaRruMs5jf6g74B31Ts"></script>
   <script type="text/javascript">
    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("l-map");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var marker = new BMap.Marker(r.point);
            map.addOverlay(marker);
            map.panTo(r.point);
            marker.enableDragging();  
            var p = marker.getPosition();       //获取marker的位置
			document.getElementById("lng").value=p.lng ;
			document.getElementById("lat").value=p.lat; 
            marker.addEventListener("mouseup",getAttr);
			function getAttr(){
				var p = marker.getPosition();       //获取marker的位置
				document.getElementById("lng").value=p.lng ;
				document.getElementById("lat").value=p.lat; 
			}
        }
        else {
            alert('failed'+this.getStatus());
        }        
    },{enableHighAccuracy: true});
    map.enableScrollWheelZoom(true);
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
        ,"location" : map
    });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
    var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
        
        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        
        setPlace();
    });

    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            var marker = new BMap.Marker(pp);// 创建标注
            map.centerAndZoom(pp, 18);
            map.addOverlay(marker);    //添加标注
            marker.enableDragging();           // 可拖拽
			var p = marker.getPosition();       //获取marker的位置
			document.getElementById("lng").value=p.lng ;
			document.getElementById("lat").value=p.lat; 
            marker.addEventListener("mouseup",getAttr);
			function getAttr(){
				var p = marker.getPosition();       //获取marker的位置
				document.getElementById("lng").value=p.lng ;
				document.getElementById("lat").value=p.lat; 
			}
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
          onSearchComplete: myFun
        });
        local.search(myValue);
    }
    var navigationControl = new BMap.NavigationControl({
    // 靠左上角位置
    anchor: BMAP_ANCHOR_TOP_LEFT,
    // LARGE类型
    type: BMAP_NAVIGATION_CONTROL_LARGE,
    // 启用显示定位
    enableGeolocation: true
  });
  map.addControl(navigationControl);
  // 添加定位控件
  var geolocationControl = new BMap.GeolocationControl();
  geolocationControl.addEventListener("locationSuccess", function(e){
    // 定位成功事件
    var address = '';
    address += e.addressComponent.province;
    address += e.addressComponent.city;
    address += e.addressComponent.district;
    address += e.addressComponent.street;
    address += e.addressComponent.streetNumber;
    alert("当前定位地址为：" + address);
  });
  geolocationControl.addEventListener("locationError",function(e){
    // 定位失败事件
    alert(e.message);
  });
  map.addControl(geolocationControl);
</script>
</body>
</html>
